<template>
	<view class="page-container">
		
		<uni-forms label-align="right" label-width="160rpx">
			<uni-forms-item label="头像:">
			<uni-file-picker ref="files" :auto-upload="false"  @select="handleSelect"/>
			
			</uni-forms-item>
			<uni-forms-item label="昵称:">
				<uni-easyinput v-model="formData.nickname" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="密码:">
				<uni-easyinput v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="重复密码:">
				<uni-easyinput v-model="formData.password2" placeholder="请输入确认密码" />
			</uni-forms-item>
			<uni-forms-item label="个人简介:">
				<uni-easyinput v-model="formData.description" type="textarea" placeholder="请输入个人简介" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="handleSubmit">确定</button>
	</view>
</template>

<script>
	import { editUser } from '../../common/js/api/user';
import uniFilePicker from '../../uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue'
	export default {
		components:{
			uniFilePicker
		},
		data() {
			return {
				avatar: {
					"name": "avatar",
					"extname": "jpg",
					"url": "https://p4.itc.cn/q_70/images03/20220311/c5210d8f7b434b088be416dff6efb719.jpeg",
				},
				formData: {
					avatar:'',
					nickname: '',
					password: undefined,
					password2: undefined,
					description: '',
				}
			}
		},
		methods: {
			handleUpload(){
				console.log("点击上传");
				this.$refs.files.upload()
			},
			handleSelect(val){
				console.log("选择了文件")
				console.log(val);
				uni.showLoading({
					title:'正在上传'
				})				
				uni.uploadFile({
					url: process.env.API_URL+'/api/v1/system/upload/singleImg',
					filePath:val.tempFilePaths[0],
					name:'file',
					header:{
						'Authorization':'Bearer '+uni.getStorageSync('token')
					},
					success:(res)=>{
						console.log(res);
						try{
							const resData = JSON.parse(res.data)
							console.log(resData);						
							if(resData.code === 0) {
								this.formData.avatar = resData.data.path
							}
						}catch(e){
							console.error(e)
						}
					},
					fail(err) {
						console.error(err)
					},
					complete(){
						uni.hideLoading()
					}
				})
			},
			handleSubmit() {
				uni.showLoading({
					title: '正在提交'
				})
				setTimeout(() => {
					editUser(this.formData).then(res=>{
						console.log(res);
					})
				}, 2000)
	
			}
		}
	}
</script>

<style scoped>
	.page-container {
		padding: 16px;
	}
</style>
